<template>
  <div class="login-header container">
      <div class="logo">
          <img src="/imgs/logo-mi.png" alt="">
          <span class="logo-name">
              <h3>小米商城</h3>
              <span class='ads'>让每个人都能享受科技的乐趣</span>
          </span>
      </div>
  </div>
</template>

<script>
export default {
    name: 'LoginHeader'
}
</script>

<style lang="scss">
.login-header{
    height: 112px;
    position: relative;
    .logo{
        height: 55px;
        width: 100%;
        position: absolute;
        top: 50%;
        left: 0;
        transform: translateY(-50%);
        img{
            width: 53px;
            height: 52px;
            float: left;
            vertical-align: middle;
            font-size: 0;
        }
        .logo-name{
            display: inline-block;
            margin-top: -5px;
            margin-left: 18px;
        }
        h3{
            font-size: 33px;
            font-weight: bold;
            color: #333333;
        }
        .ads{
            font-size: 10px;
            font-weight: bold;
            color: #666666;
        }

    }
}
</style>